<template>
    <div>
        <getBook :data="data">
            <template #left="{ item }">
                <button @click="update(item)">编辑</button>
                <button @click="del(item.id)">删除</button>
            </template>

        </getBook>
        <updateBook :showCom.sync="showCom">

        </updateBook>
    </div>
</template>
<script>
import getBook from './Book/getBook.vue'
import updateBook from './Book/updateBook.vue'
import axios from 'axios'
export default {
    components: {
        getBook,
        updateBook
    },
    data() {
        return {
            data: [],
            showCom:false,
            item:''
        }
    },
    created() {
        this.getBook()
    },
    computed: {
    },
    methods: {
        del(id) {
            axios({
                url: 'http://ajax-api.itheima.net/api/books/'+id,
                method: 'DELETE'
            })
            this.data = this.data.filter(item=>item.id !== id)
        },
        async getBook() {
            const res = await this.$axios.get('http://ajax-api.itheima.net/api/books')
            this.data = res.data.data
        },
        update(item){
            console.log(item);
            this.item =item
            this.showCom=true
        }
    },
    
}
</script>
<style lang='less'  scoped></style>
